<template>
	<view style="padding: 30rpx;">
		<button @click="onSetTimeOut()" type="primary">单次定时器</button>
		<button @click="onSetTimeOutWithParams('LL',666)" type="primary" plain="true">启动带参定时器</button>
		<button @click="onClearTimeOut()" type="warn">取消单次定时器</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time1: null, // 存储定时器ID
				time2: null  // 存储带参数的定时器ID
			}
		},
		methods: {
			// 无参定时器方法
			onSetTimeOut(){
				console.log("onSetTimeOut()");
				// 清除可能存在的旧定时器
				if (this.time1) clearTimeout(this.time1)
				// 箭头函数保留this上下文
				this.time1 = setTimeout(()=>{
					console.log("onSetTimeOut() callback");
					console.log("onSetTimeOut() callback end");
				}, 3000); // 修复注释格式
			},
			
			// 带参定时器方法（重命名避免冲突）
			onSetTimeOutWithParams(username, pwd){
				console.log("onSetTimeOutWithParams()", username, pwd);
				// 清除可能存在的旧定时器
				if (this.time2) clearTimeout(this.time2)
				// 带参数的定时器
				this.time2 = setTimeout((x, y)=>{
					console.log("-----callback", x, y);
				}, 2000, username, pwd); // 修复逗号错误
			},
			
			// 取消定时器方法
			onClearTimeOut(){
				console.error("onClearTimeOut");
				// 清除所有可能存在的定时器
				if (this.time1) {
					clearTimeout(this.time1);
					this.time1 = null;
				}
				if (this.time2) {
					clearTimeout(this.time2);
					this.time2 = null;
				}
			}
		}
	}
</script>

<style>
button{
	margin: 20rpx;
}
</style>